<template>
<!--开票查询-->
  <div>
    <div class="find-account-box">
      <div style="display: flex;padding-left: 15px;padding-top: 11px;height: 30px" >
        <a  href="#">
          <div style="display: flex"  @click="firstLoading" >
            <i class="icon-fapiaoguanli" style="margin-top: 4px;margin-right: 5px;margin-left: 5px"></i>
            <h3>开票展示&nbsp;&nbsp;&nbsp;</h3>
          </div>
        </a>
        <div style="display: flex;margin-left: 305px">
          <span style="display: block;padding-top: 5px;font-size: 13px;font-weight: bold">发票类型:&nbsp;&nbsp;</span>
          <el-select v-model="selectMsg.invoiceType" style="width: 100px" size="mini" placeholder="请选择" >
            <el-option label="所有类型" value="所有类型" ></el-option>
            <el-option label="采购开票" value="采购开票"  ></el-option>
            <el-option label="销售开票" value="销售开票" ></el-option>
            <el-option label="开平开票" value="开平开票" ></el-option>
          </el-select>
          <span style="font-size: 13px;display: block;padding-top: 5px;margin-left: 20px;font-weight: bold">开票时间&nbsp;:&nbsp;</span>
          <el-date-picker
            size="mini"
            v-model="selectMsg.timeZone"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
          <span  style="font-size: 13px;display: block;padding-top: 5px;margin-left: 20px;font-weight: bold" > 对象&nbsp;:&nbsp;&nbsp;</span>
          <el-input v-model="selectMsg.duiXiang" size="mini"    clearable style="width: 120px;margin-right: 10px" ></el-input>
          <el-button  size="small" @click="selectMsgWay" type="danger" icon="el-icon-search" circle></el-button>
        </div>

      </div>

      <div class="find-account-box-detail">
        <el-table
          v-loading="loading"
          :data="dataList"
          element-loading-text="已经很努力加载了(•́へ•́╬)"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          size="small"
          @selection-change="handleSelectionChange"
          height="561"
          style="width: 100%"
           >
          <el-table-column
            align="center"
            label="发票编号"
            prop="invoiceId"
            width="130"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="发票抬头"

            width="110"
          >
            <template slot-scope="scope">
         <span style="font-style: oblique;font-size: 16px;font-weight: bold">{{scope.row.invoiceTitle}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="对象"
            width="200"
          >
            <template slot-scope="scope">
              <el-tag  >{{scope.row.who}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="经办人"
            width="100"

          >
            <template slot-scope="scope">
              <el-tag effect="dark" >{{scope.row.employee.realName}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="开票时间"
            width="200"
          >
            <template slot-scope="scope">
              <span style="font-weight: bold;font-size: 16px">{{scope.row.invoiceTime}}</span>

            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="发票类型"
            width="150"
          >
            <template slot-scope="scope">
              <el-tag type="danger" >{{scope.row.invoiceType}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="金额"
            width="130"
          >
            <template slot-scope="scope">
              <span style="font-weight: bold;font-size: 16px;color: #ff3526">{{scope.row.invoiceMoney}}元</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="细节"
            width="70"
          >
            <template slot-scope="scope">
              <el-button  :disabled="scope.row.invoiceType ==='开平开票(特殊)' || scope.row.invoiceType ==='销售开票(特殊)' || scope.row.invoiceType ==='采购开票(特殊) ' " icon="icon-xijie"   size="mini"></el-button>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="作废"
            width="70"
          >
            <template slot-scope="scope">
              <el-button :disabled="scope.row.way===1" icon="icon-feiqi"  style="height: 33px"  size="mini"></el-button>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="修改"
            width="50"
          >
            <template slot-scope="scope">
              <el-button type="text"><span class="el-icon-edit-outline"></span></el-button>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="选定"
            type="selection"
            width="46">
          </el-table-column>

        </el-table>
        <div  style="position: relative">
          <el-pagination
            align="center"
            style="margin-top: 10px"
            background
            :page-size="selectMsg.pageSize"
            :current-page="selectMsg.currentPage"
            layout="prev, pager, next"
            @current-change="changePage"
            :total="total">
          </el-pagination>
          <div style="position: absolute;right: 10px;top: 0px">

            <el-button   type="info" size="mini">删除</el-button>
          </div>
        </div>
        </div>
    </div>
  </div>
</template>

<script>
import {post} from "../../utils/request";
import {INVOICE_RECORDING_DATA} from "../../utils/basic-data";

export default {
  name: "FindAccountRecording",
  data(){
    return{
      loading:false,
      multipleSelection:[],
      dataList:[],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

      selectMsg:{
        currentPage:1,
        pageSize:INVOICE_RECORDING_DATA,
        invoiceType:'所有类型',
        timeZone:null,
        duiXiang:null,
      },

      total:0,

    }
  },
  mounted() {
    this.firstLoading()
  },
  methods:{
    firstLoading() {
      this.loading = true
      var temp={
          currentPage:1,
          pageSize:INVOICE_RECORDING_DATA,
          invoiceType:'所有类型',
          timeZone:null,
          duiXiang:null,
      }
      this.selectMsg=temp
      this.total=0
      post('/api/v1/get/invoice/data',this.selectMsg).then(resp=>{

        this.total=resp.data.total
        this.dataList=resp.data.objectList

        this.loading=false
      })


    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    changePage(value){
      this.loading=true
      this.selectMsg.currentPage=value
      post('/api/v1/get/invoice/data',this.selectMsg).then(resp=>{

        this.total=resp.data.total
        this.dataList=resp.data.objectList

      })
        this.loading=false

    },
    selectMsgWay(){
      this.loading=true
      this.selectMsg.currentPage=1
      post('/api/v1/get/invoice/data',this.selectMsg).then(resp=>{

        this.total=resp.data.total
        this.dataList=resp.data.objectList
        this.loading=false
      })

    },
  }
}
</script>

<style scoped>
a{
  text-decoration: none;
  color: #2c3e50;
}
h3{
  margin: 0;
}

.find-account-box-detail{

  width: 1260px;
  margin-left: 15px;
  height: 617px;
  border-radius: 20px;
  background-color: #f2f2f2;
}
.find-account-box{
  height: 674px;

  margin-top: 10px;
  width: 1290px;
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}
</style>
